<template>
  <div class="app-container drag-container">
    <el-row :gutter="0">
      <el-col :xs="24" :sm="6" :md="5" :lg="4" class="drag-area" id="drag-area">
        <div style="text-align: center; color: #0fa8e7">数据选择</div>

        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
        <!--      侧边栏拖拽框 -->
        <div class="drag-tip" id="drag-tip"></div>
      </el-col>

      <el-col :xs="24" :sm="18" :md="18.7" :lg="20" id="drag-content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="知识点" name="first">
            <div>
              <h3>课程概述</h3>
              <p>
                “数据结构”是计算机科学与技术专业、软件工程专业甚至于其它电气信息类专业的重要专业基础课程。它所讨论的知识内容和提倡的技术方法，无论对进一步学习计算机领域的其它课程，还是对从事大型信息工程的开发，都是重要而必备的基础。
                程序设计解决问题往往有多种方法，且不同方法之间的效率可能相差甚远。程序的时间和空间效率，不仅跟数据的组织方式有关，也跟处理流程的巧妙程度有关。本课程将介绍并探讨有关数据组织、算法设计、时间和空间效率的概念和通用分析方法，帮助学员学会数据的组织方法和一些典型算法的实现，能够针对问题的应用背景分析，选择合适的数据结构，从而培养高级程序设计技能。
                注意：本课程只涉及最基础的数据结构和与之关联的最基本的算法，更多更复杂的数据结构和经典的解决优化问题的算法，将在后续课程中介绍。
                本课程的特点是，对每一种重要的经典数据结构，我们都会从实际应用问题出发，导出其定义、实现（存储）方法以及操作实现，并以更丰富的综合应用案例和练习题帮助学员增强对理论的感性认识，从而明白这些数据结构为什么存在以及在什么情况下可以最好地解决什么样的问题。为了兼顾起点不同的学员，课程中特意设计了“小白专场”系列，手把手教授如何将解决问题的抽象算法用具体的代码实现，从而引导初学者更好地入门。
                坚持完成本课程学习、并按照要求完成所有练习的学员，应该具备了PAT（Programming
                Ability
                Test）甲级需要的所有基础知识，辅以充分的英语阅读能力和熟练的编程能力，应可以取得优良成绩。
              </p>
            </div>
            <div>
              <h3>课程大纲</h3>
              <ul v-for="(item1, index1) in outlineData" :key="index1">
                <li>
                  <h4>
                    {{ item1.title }}
                  </h4>
                  <ul v-for="(item2, index2) in item1.data" :key="index2">
                    <li>{{ item2.ctitle }}</li>
                  </ul>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="题库" name="second">
            <h3>题库</h3>
            <ul v-for="(item1, index1) in questionData" :key="index1">
              <li>
                <h4>
                  {{ item1.title }}
                </h4>
                <ul v-for="(item2, index2) in item1.data" :key="index2">
                  <li>{{ item2.ctitle }}</li>
                </ul>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="视频" name="third">
            <h3>视频课件</h3>
            <ul v-for="(item1, index1) in videoData" :key="index1">
              <li>
                <h4>
                  {{ item1.title }}
                </h4>
                <ul v-for="(item2, index2) in item1.data" :key="index2">
                  <li>{{ item2.ctitle }}</li>
                </ul>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="教材" name="fourth">
            <h3>教材课件</h3>
            <ul v-for="(item1, index1) in textbookData" :key="index1">
              <li>
                <h4>
                  {{ item1.title }}
                </h4>
                <ul v-for="(item2, index2) in item1.data" :key="index2">
                  <li>
                    <p>{{ item2.ctitle }}</p>
                    <ul v-for="(item3, index3) in item2.data" :key="index3">
                      <li>
                        {{ item3.ctitle }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "teacherCourse",
  data() {
    return {
      data: [
        {
          label: "信息工程学院",
          children: [
            {
              label: "数据结构",
              children: [
                {
                  label: "张老师",
                },
                {
                  label: "李老师",
                },
              ],
            },
            {
              label: "算法",
              children: [
                {
                  label: "王老师",
                },
                {
                  label: "李老师",
                },
              ],
            },
            {
              label: "操作系统",
              children: [
                {
                  label: "刘老师",
                },
              ],
            },
          ],
        },
        {
          label: "数学学院",
          children: [
            {
              label: "高等数学",
              children: [
                {
                  label: "张老师",
                },
                {
                  label: "李老师",
                },
              ],
            },
            {
              label: "概率论",
              children: [
                {
                  label: "王老师",
                },
                {
                  label: "李老师",
                },
              ],
            },
            {
              label: "数理逻辑",
              children: [
                {
                  label: "刘老师",
                },
              ],
            },
          ],
        },
      ],

      defaultProps: {
        children: "children",
        label: "label",
      },
      activeName: "first",
      outlineData: [
        {
          title: "第一讲 基本概念",
          data: [
            { ctitle: "1.1 什么是数据结构" },
            { ctitle: "1.2 什么是算法" },
            { ctitle: "1.3 应用实例：最大子列和问题" },
          ],
        },
        {
          title: "第二讲 线性结构",
          data: [
            { ctitle: "2.1 线性表及其实现" },
            { ctitle: "2.2 堆栈" },
            { ctitle: "2.3 队列" },
            { ctitle: "2.4 应用实例：多项式加法运算" },
          ],
        },
        {
          title: "第三讲 树(上) ",
          data: [
            { ctitle: "3.1 树与树的表示" },
            { ctitle: "3.2 二叉树及存储结构" },
            { ctitle: "3.3 二叉树的遍历" },
            { ctitle: "小白专场：树的同构 - C语言实现" },
          ],
        },
        {
          title: "第四讲 树（中）",
          data: [
            { ctitle: "4.1 二叉搜索树" },
            { ctitle: "4.2 平衡二叉树" },
            { ctitle: "小白专场：是否同一棵二叉搜索树- C实现" },
            { ctitle: "线性结构之习题选讲" },
          ],
        },
        {
          title: "第五讲 树（下）",
          data: [
            { ctitle: "5.1 堆" },
            { ctitle: "5.2 哈夫曼树与哈夫曼编码" },
            { ctitle: "5.3 集合及运算" },
            { ctitle: "小白专场：堆中的路径 - C语言实现" },
          ],
        },
      ],

      videoData: [
        {
          title: "第一讲 基本概念(1:15:26)",
          data: [
            { ctitle: "1.1 什么是数据结构(09:24)" },
            { ctitle: "1.2 什么是算法(04:08)" },
            { ctitle: "1.3 应用实例：最大子列和问题(10:17)" },
          ],
        },
        {
          title: "第二讲 线性结构",
          data: [
            { ctitle: "2.1 线性表及其实现(10:17)" },
            { ctitle: "2.2 堆栈(8:17)" },
            { ctitle: "2.3 队列(5:17)" },
            { ctitle: "2.4 应用实例：多项式加法运算" },
          ],
        },
        {
          title: "第三讲 树(上) ",
          data: [
            { ctitle: "3.1 树与树的表示" },
            { ctitle: "3.2 二叉树及存储结构" },
            { ctitle: "3.3 二叉树的遍历" },
            { ctitle: "小白专场：树的同构 - C语言实现" },
          ],
        },
        {
          title: "第四讲 树（中）",
          data: [
            { ctitle: "4.1 二叉搜索树" },
            { ctitle: "4.2 平衡二叉树" },
            { ctitle: "小白专场：是否同一棵二叉搜索树- C实现" },
            { ctitle: "线性结构之习题选讲" },
          ],
        },
        {
          title: "第五讲 树（下）",
          data: [
            { ctitle: "5.1 堆" },
            { ctitle: "5.2 哈夫曼树与哈夫曼编码" },
            { ctitle: "5.3 集合及运算" },
            { ctitle: "小白专场：堆中的路径 - C语言实现" },
          ],
        },
      ],
      questionData: [
        {
          title: "单项选择题",
          data: [
            {
              ctitle: "1. 数据结构的概念",
            },
            {
              ctitle: "2.下列那个选项是树形结构",
            },
            {
              ctitle: "3.下面哪个选项是图形结构",
            },
          ],
        },
        {
          title: "多项选择题",
          data: [
            {
              ctitle: "1. 数据结构的概念",
            },
            {
              ctitle: "2.下列那个选项是树形结构",
            },
            {
              ctitle: "3.下面哪个选项是图形结构",
            },
          ],
        },
        {
          title: "填空题",
          data: [
            {
              ctitle: "1. 数据结构的概念",
            },
            {
              ctitle: "2.下列那个选项是树形结构",
            },
            {
              ctitle: "3.下面哪个选项是图形结构",
            },
          ],
        },
        {
          title: "简答题",
          data: [
            {
              ctitle: "1. 数据结构的概念",
            },
            {
              ctitle: "2.下列那个选项是树形结构",
            },
            {
              ctitle: "3.下面哪个选项是图形结构",
            },
          ],
        },
      ],
      textbookData: [
        {
          title: "第1章 绪论",
          data: [
            {
              ctitle: "1.1什么是数据结构",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "1.2 基本概念和术语",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "1.3 抽象数据类型的表现与实现",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
          ],
        },

        {
          title: "第2章 线性表",
          data: [
            {
              ctitle: "2.1 线性表的类型定义",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "2.2 线性表的顺序表示和实现",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "2.3 线性表的链式表示和实现",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
          ],
        },
        {
          title: "第3章 栈和队列",
          data: [
            {
              ctitle: "3.1 栈",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "3.2 栈的应有和举例",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
            {
              ctitle: "3.3 栈与递归的实现",
              data: [
                {
                  ctitle: "1.请描述数据结构的概念",
                },
                {
                  ctitle: "2.请画出数据结构的表示形式",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
</style>
